<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>03_计数器</title>
</head>
<body>
    <h3>传统方式实现计数器</h3>
    <input type="text" id="number" value="0">
    <button onclick="increment()">+</button>
    <button onclick="decrement()">-</button>

    <h3>Vue方式实现计数器</h3>
    <div id="app">
        <input type="text" id="number2" :value="initNumber">
        <button v-on:click="increment()">+</button>
        <button v-on:click="decrement()">-</button>
    </div>
</body>
<script src="../vue.js"></script>
<script>
    <!--1.先用传统方式实现计数器-->
    let number = document.getElementById("number").value;
    function increment(){
        number++;
        document.getElementById("number").value = number;
    }
    function decrement(){
        number--;
        document.getElementById("number").value = number;
    }

    /*2.vue*/
    const vm = new Vue({
        el: '#app',
        data: {
            initNumber: 0,
        },
        methods: {
            increment(){
                this.initNumber++
            },
            decrement(){
                this.initNumber--
            }
        }
    })

</script>
</html>